<template>
  <div class="container">
    <div class="banner-wrapper">
      <el-carousel style="height: 100%" ref="banner" interval="2000">
        <el-carousel-item
          v-for="(item, index) in apiData.bsHomeMsgList"
          :key="index"
        >
          <el-image
            class="banner-image"
            style="height: 100%; width: 100%"
            fit="fill"
            :src="item.homeView"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="content-wrapper">
      <div class="about-wrapper" id="active1">
        <div class="about-title">
          <el-image :src="require('../assets/img.png')" />
          <div class="about-title-content">关于我们 <span>ABOUTS</span></div>
        </div>
        <div class="about-content">
          <div class="about-content-img">
            <el-image
              style="height: 100%; width: 100%; border-radius: 20px"
              :src="apiData.synopsisImg"
              fit="fill"
            />
          </div>
          <span class="about-content-info">
            {{ apiData.synopsis }}
          </span>
        </div>
      </div>

      <div class="expert-wrapper" id="active2">
        <div class="expert-title">
          <el-image :src="require('../assets/img_3.png')" />
          <div class="expert-title-content">
            国内专家 <span>EXPERT TEAM</span>
          </div>
        </div>
        <div class="expert-content">
          <div
            class="expert-content-item"
            v-for="item in apiData.bsExpertList"
            :key="item.id"
            style="border-radius: 20px"
            @click="toPaperDetail(item.expertName, item.introduceMsg)"
          >
            <div class="expert-img">
              <el-image
                style="height: 100%; width: 100%"
                :src="item.thumbnail"
                fit="fill"
              />
            </div>
            <div class="expert-name">
              {{ item.expertName }}
            </div>
            <div class="expert-level">
              {{ item.expertPost }}
            </div>
            <div class="expert-desc">
              {{ item.introduceMsg }}
            </div>
          </div>
        </div>
      </div>

      <div class="partner-wrapper" id="active3">
        <div class="partner-title" style="position: relative">
          <el-image :src="require('../assets/img_1.png')" />
          <div class="partner-title-content">
            协同网点 <span>PARTNER</span>
            <div
              style="
                position: absolute;
                right: 10px;
                font-size: 14px;
                font-weight: normal;
                cursor: pointer;
              "
              @click="toPaperDetail('', '', true)"
            >
              查看更多
            </div>
          </div>
        </div>
        <div class="partner-content">
          <el-carousel
            class="partner-content-item"
            type="card"
            interval="2000"
            ref="partner"
            style="height: 100%"
          >
            <el-carousel-item
              v-for="(item, index) in apiData.bsOrganizationList.length > 10
                ? apiData.bsOrganizationList.slice(0, 10)
                : apiData.bsOrganizationList"
              :key="index"
              @click="toPaperDetail(item.organizationName, item.introduceMsg)"
            >
              <div class="partner-image">
                <el-image
                  style="height: 100%; width: 100%; border-radius: 20px"
                  fit="fill"
                  :src="item.thumbnail"
                />
              </div>
              <div>
                <div class="partner-name">
                  {{ item.organizationName }}
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <div class="fruit-wrapper" id="active4">
        <div class="fruit-title">
          <el-image :src="require('../assets/img_2.png')" />
          <div class="fruit-title-content">研发成果 <span>FRUIT</span></div>
        </div>
        <div class="fruit-content">
          <div
            class="fruit-content-item"
            v-for="item in apiData.bsAchievementList"
            :key="item.id"
            @click="toPaperDetail(item.achievementName, item.introduceMsg)"
          >
            <div class="fruit-img">
              <el-image
                style="height: 100%; width: 100%; border-radius: 20px"
                :src="item.thumbnail"
                fit="fill"
              />
            </div>
            <div class="fruit-name">
              {{ item.remark }}
            </div>
          </div>
        </div>
      </div>

      <div class="paper-wrapper">
        <div class="paper-title">
          <el-image :src="require('../assets/img_1.png')" />
          <div class="paper-title-content">学术论文 <span>PAPER</span></div>
        </div>
        <div class="paper-content">
          <div
            class="paper-content-item"
            @click="toPaperDetail(item.thesisTitle, item.content)"
            v-for="item in apiData.bsThesisList"
            :key="item.id"
          >
            <div class="paper-content-img">
              <el-image
                style="width: 100%; height: 100%; border-radius: 20px"
                fit="fill"
                :src="item.thumbnail"
              />
            </div>
            <div class="paper-content-info">
              <div class="paper-content-title">
                {{ item.thesisTitle }}
              </div>
              <div class="paper-content-date">
                {{ item.updateTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="footer-about">
        <div>关于我们</div>
        <div class="footer-about-content">
          <div>
            <div class="footer-about-content-title">地址</div>
            <div class="footer-about-content-name">
              广州市荔湾区荔湾路幸福新村福儿路1号
            </div>
          </div>
          <div>
            <div class="footer-about-content-title">电话</div>
            <div class="footer-about-content-name">
              (020)2552-8568/(020)2655-8889
            </div>
          </div>
          <div>
            <div class="footer-about-content-title">工作时间</div>
            <div class="footer-about-content-name">
              工作日 早上8:30-下午6:00 周六 早上8:30-中午12:00
            </div>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        版权所有中国中医耳鼻喉研究院 未经允许 请勿转载 粤ICP备O088888802号
      </div>
    </div>

    <!--      <div class="search-wrapper">-->
    <!--        <div class="search-input-wrapper">-->
    <!--          <el-input v-bind="searchForm.keyword" placeholder="请输入关键字" />-->
    <!--          <div class="btn-search">搜索</div>-->
    <!--        </div>-->

    <!--        <div class="search-link-wrapper">-->
    <!--          <div>-->
    <!--            <div class="search-link-title">24小时免费联系电话</div>-->
    <!--            <div class="search-link-phone">18605330195</div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
  </div>
</template>

<script>
import Axios from "axios"
export default {
  name: "IndexContent",
  data() {
    return {
      searchForm: {
        keyword: "",
      },
      apiData: {
        bsHomeMsgList: [],
        bsExpertList: [],
        bsOrganizationList: [],
        bsAchievementList: [],
        bsThesisList: [],
        synopsis: "",
        synopsisImg: "",
      },
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      /*   if (from.path != "/detail") {
        vm.getData()
      } */

      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm) //当前组件的实例
    })
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    toPaperDetail(title, content, isList) {
      // console.log(content)
      if (isList) {
        this.$router.push({
          name: "IndexContentDetail",
          params: {
            isList: true,
            content: content,
          },
        })
      } else {
        this.$router.push({
          name: "IndexContentDetail",
          params: {
            content: content,
          },
        })
      }
    },
    getData() {
      Axios.get("http://admin.zgzyebh120.com/api/system/website/get")
        .then((res) => {
          this.apiData = res.data.data
          // console.log(this.apiData)
          setTimeout(() => {
            this.$refs.banner.setActiveItem(0)
            this.$refs.partner.setActiveItem(1)
          }, 50)
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
  watch: {
    $route(to, from) {
      console.log(to)
      console.log(from)
      if (from.name === "IndexContent") {
        let activeTab = this.$route.params.activeTab
        if (activeTab) {
          let d = document.querySelector("#active" + activeTab)
          if (d) {
            d.scrollIntoView()
          }
        }
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  display flex
  flex-direction column
  justify-content center
  position relative
  .banner-wrapper
    /deep/.el-carousel__container
      height 36rem
    .banner-image
      height 100%
      width 100%
      object-fit cover
  .content-wrapper
    width 70%
    margin 0 auto
    margin-top 2rem
    .about-wrapper
      background-color #ffffff
      .about-title
        height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        padding-left 0.5rem
        .about-title-content
          display flex
          flex-direction row
          align-items center
          font-size 1.2rem
          font-weight bold
          margin-left .5rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .about-content
        display flex
        flex-direction row
        align-items center
        margin-top 1rem
        .about-content-img
          width 20rem
          height 14rem
        .about-content-info
          width calc(100% - 20rem)
          text-indent 1.6rem
          letter-spacing 0.1rem
          line-height 1.5rem
          padding 2rem
          font-size 0.9rem
    .expert-wrapper
      background-color #ffffff
      margin-top 2rem
      .expert-title
        height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        padding-left .5rem
        .expert-title-content
          display flex
          flex-direction row
          align-items center
          font-size 1.2rem
          font-weight bold
          margin-left .5rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .expert-content
        display flex
        flex-direction row
        justify-content space-between
        flex-wrap wrap
        margin-top 1rem
        .expert-content-item
          &:hover {
            border 5px solid rgb(234, 248,251)
          }
          box-sizing border-box
          cursor pointer
          display flex
          flex-direction column
          align-items center
          width 19%
          border 5px solid transparent
          box-shadow 0 0 1px 1px #f6f6f6
          .expert-img
            height 8rem
            width 8rem
            margin-top .4rem
            /deep/img
              border-radius 4rem
              border 1px solid rgb(108, 199, 231)
              box-sizing border-box
              object-fit cover
          .expert-name
            margin-top 0.8rem
            font-size 0.5rem
          .expert-level
            margin-top 0.5rem
            font-size 0.3rem
            color rgb(108, 199, 231)
          .expert-desc
            margin-top 0.8rem
            letter-spacing 0.2rem
            text-indent 1rem
            line-height 1.2rem
            text-align justify
            font-size 0.5rem
            margin-left 0.4rem
            margin-right 0.4rem
            margin-bottom .4rem
            text-overflow -o-ellipsis-lastline
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 8
            line-clamp 8
            -webkit-box-orient vertical
    .partner-wrapper
      background-color #ffffff
      margin-top 2rem
      .partner-title
        height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        padding-left .5rem
        .partner-title-content
          display flex
          flex-direction row
          align-items center
          font-size 1.5rem
          font-weight bold
          margin-left .5rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .partner-content
        display flex
        flex-direction row
        justify-content space-between
        flex-wrap wrap
        margin-top 1rem
        width 100%
        .partner-content-item
          //&:hover {
          //  border 5px solid rgb(234, 248,251)
          //}
          width 100%
          cursor pointer
          display flex
          flex-direction column
          align-items center
          //box-shadow 0 0 2px 2px #f6f6f6
          //width 18%
          //border 5px solid transparent
          /deep/.el-carousel__container
            width 100%
            height 24rem
            .partner-image
              width 100%
              height 22rem
            .partner-name
              padding-top .8rem
              font-size 1rem
              text-align center
    .fruit-wrapper
      background-color #ffffff
      margin-top 2rem
      .fruit-title
        height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        padding-left .5rem
        .fruit-title-content
          display flex
          flex-direction row
          align-items center
          font-size 1.2rem
          font-weight bold
          margin-left 1rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .fruit-content
        display flex
        flex-direction row
        justify-content space-between
        flex-wrap wrap
        margin-top 0.2rem
        .fruit-content-item
          &:hover {
            border 5px solid rgb(234, 248,251)
          }
          cursor pointer
          display flex
          flex-direction row
          justify-content center
          align-items center
          box-shadow 0 0 1px 1px #f6f6f6
          margin-top 0.8rem
          width 100%
          border 5px solid transparent
          .fruit-img
            width 20rem
            height 14rem
          .fruit-name
            width calc(100% - 20rem)
            font-size 0.9rem

            text-indent 1.6rem
            letter-spacing 0.1rem
            line-height 1.5rem
            text-align justify
            padding 2rem
    .paper-wrapper
      background-color #ffffff
      margin-top 2rem
      .paper-title
        height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        padding-left .5rem
        .paper-title-content
          display flex
          flex-direction row
          align-items center
          font-size 1.2rem
          font-weight bold
          margin-left .5rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
    .paper-content
      display flex
      flex-direction row
      justify-content space-between
      flex-wrap wrap
      margin-top 0.2rem
      .paper-content-item
        &:hover {
          border 5px solid rgb(234, 248,251)
        }
        cursor pointer
        display flex
        flex-direction row
        align-items center
        box-shadow 0 0 1px 1px #f6f6f6
        margin-top 0.8rem
        width 49%
        border 5px solid transparent
        .paper-content-img
          width 15rem
          height 10rem
        .paper-content-info
          width calc(100% - 15rem)
          ont-size 0.8rem
          text-indent 1.6rem
          letter-spacing 0.1rem
          line-height 1.2rem
          text-align justify
          padding 2rem
          .paper-content-title
            font-size 1rem
          .paper-content-date
            font-size 0.5rem
            margin-top 1rem
            color gray
  .footer
    margin-top 2rem
    height 14rem
    background-color rgb(64, 89, 102)
    .footer-about
      height 11rem
      width 70%
      margin 0 auto
      font-size 1.3rem
      color #ffffff
      display flex
      flex-direction column
      justify-content center
      .footer-about-content
        margin-top 2rem
        display flex
        flex-direction row
        justify-content space-between
        padding-left 1rem
        padding-right 1rem
        .footer-about-content-title
          font-size 0.5rem
        .footer-about-content-name
          margin-top 0.5rem
          font-size 0.8rem
    .footer-copyright
      height 3rem
      line-height 3rem
      text-align center
      background-color rgb(35, 53, 77)
      color rgb(132, 148, 164)
      font-size 0.9rem
  .search-wrapper
    width 70%
    height 6rem
    z-index 6
    background-color #ffffff
    box-shadow 0 0 1px 1px #f6f6f6
    position absolute
    top 33rem
    left 15%
    display flex
    flex-direction row
    justify-content center
    align-items center
    .search-input-wrapper
      height 2.5rem
      width 30rem
      background-color rgb(127,206,247)
      display flex
      flex-direction row
      justify-content center
      align-items center
      /deep/.el-input__inner
        height 2rem
        line-height 2rem
        margin-left 0.2rem
        color #000000
      .btn-search
        width 6rem
        color #ffffff
        text-align center
    .search-link-wrapper
      margin-left 10rem
      .search-link-title
        color rgb(167,167,167)
        font-size 0.8rem
      .search-link-phone
        margin-top .5rem
        color rgb(127,206,247)
        font-size 1.2rem
        font-weight bold
</style>
